<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex bg-image flex-center">
        <q-card v-bind:style="$q.screen.lt.sm?{'width': '80%'}:{'width':'30%'}">
          <q-card-section>
            <q-avatar size="103px" class="absolute-center shadow-10">
              <img src="profile.svg">
            </q-avatar>
          </q-card-section>
          <q-card-section>
            <div class="text-center q-pt-lg">
              <div class="col text-h6 ellipsis">
                Log in
              </div>
            </div>
          </q-card-section>
          <q-card-section>
            <q-form
              class="q-gutter-md"
            >
              <q-input
                filled
                v-model.trim="mydata.username"
                label="Username"
                lazy-rules
              />

              <q-input
                type="password"
                filled
                v-model.trim="mydata.password"
                label="Password"
                lazy-rules
              />
              <q-select  filled   lazy-rules v-model="mydata.database" :options="options" label="place" />
              <div>
                <q-btn label="Login" type="button" color="primary"  @click="onSubmit"/>
<!--                <q-btn label="Reset" type="button" color="primary"  class="q-ml-sm" @click="onReset"/>-->
              </div>
            </q-form>
          </q-card-section>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>


<script>
import { useQuasar } from "quasar";
import { reactive } from "vue";
import { login } from "../API/User/user";
import { useCounterStore } from 'stores/counter';


import { useRouter } from "vue-router";

export default {
  setup() {
    const store = useCounterStore();
    const router = useRouter();
// store.isShow=true
    function onSubmit() {
      //清除本地存储的token
      window.sessionStorage.removeItem("token");
      console.log("本地存储", sessionStorage.getItem("token"));
      // store.token=null;
      // 获取登录参数
      if (mydata.username!=null &&  mydata.password!=null &&  mydata.database!=null ){
      let JSONreqData = JSON.stringify(
        {
          "userNameID":mydata.username,
          "passWord":mydata.password,
          //将数据库放到参数内, 路过请求拦截时再将数据库名称放到请求头中
          "database":mydata.database
        }
      );

      //调用登录函数
      AA(JSONreqData);
      async function AA(JSONreqData) {
        const res = await login(JSONreqData)
        console.log(res);

        //将token放到本地存储
        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("userNameID", mydata.username);
        store.token=res.data.token
        mydata.token=res.data.token
        mydata.msg= "power :  " + res.data.power
        window.sessionStorage.setItem("firm", mydata.database);
        if (res.data.token.length>10){
          router.push("/home/dashboardFirst");
            console.log(res.data.power)
          window.sessionStorage.setItem("power", res.data.power);
        }else {
          alert("登录失败,请重新登录!~")
        }

      }
      }else {
        alert("请输入完整信息")
      }

    }

    function onReset() {
      // window.sessionStorage.removeItem("token");
      store.token=null;
      console.log("OK");
    }

    const options = ["zdDatasource", "cxDatasource"];
    const mydata = reactive({
      username: "",
      password: "",
      database: null,
      token:null,
      msg:null,
    });
    return {
      mydata,
      options,
      onSubmit,
      onReset,
    };

  },
};
</script>

<style>

.bg-image {
  background-image: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%);
}
</style>
